<template>
    <div>
        <!-- 限时折扣课程 -->
        <div class="timeclass">
            <!-- 标题 -->
            <div class="timeclass_title">
                <div class="timeclass_title_1">限时折扣课程</div>
                <div class="timeclass_title_2"><span>
                        更多
                    </span>
                    <img src="../../assets/images/more.png" alt=""></div>
            </div>
            <div style="clear: both;"></div>
            <!-- 内容 -->
            <div class="timeclass_content">
                <ul class="timeclass_content_top">
                    <li class="timeclass_content_top_one" v-for="(item,index) in list" :key="index">
                        <img :src=item.coverFileUrl alt="">
                        <div>{{item.courseTitle}}</div>
                        <div>共<span>56</span>节课|<span>154</span>人报名</div>
                        <div>免费</div>
                    </li>
<!--                    <li class="timeclass_content_top_two">-->
<!--                        <img src="../../assets/images/QQ图片20200711172240_05.png" alt="">-->
<!--                        <div>求职成功之道与术</div>-->
<!--                        <div>共<span>56</span>节课|<span>154</span>人报名</div>-->
<!--                        <div>免费</div>-->
<!--                    </li>-->
<!--                    <li class="timeclass_content_top_three">-->
<!--                        <img src="../../assets/images/QQ图片20200711172240_07.png" alt="">-->
<!--                        <div>vue全家桶入门实战挑战</div>-->
<!--                        <div>共<span>56</span>节课|<span>154</span>人报名</div>-->
<!--                        <div>免费</div>-->
<!--                    </li>-->
<!--                    <li class="timeclass_content_top_four">-->
<!--                        <img src="../../assets/images/QQ图片20200711172240_09.png" alt="">-->
<!--                        <div>数据结构与算法基础篇</div>-->
<!--                        <div>共<span>56</span>节课|<span>154</span>人报名</div>-->
<!--                        <div>免费</div>-->
<!--                    </li>-->
<!--                    <li class="timeclass_content_top_five">-->
<!--                        <img src="../../assets/images/QQ图片20200711172240_11.png" alt="">-->
<!--                        <div>web前端基础之html+css</div>-->
<!--                        <div>共<span>56</span>节课|<span>154</span>人报名</div>-->
<!--                        <div>免费</div>-->
<!--                    </li>-->
                </ul>
            </div>
        </div>
        <!-- 清除浮动 -->
        <div style="clear: both;"></div>
    </div>
</template>

<script>
    import {getCourse} from '../../api/Tlmusic'
    export default {
        name: "TimeCourse",
        data(){
            return{
                type:'discount',
                pageNum:1,
                pageSize:5,
                list:[{}]
            }

        },
        created() {
            getCourse(this.type, this.pageNum,this.pageSize).then(res=>{
                console.log(res)
                this.list = res.rows
            })
        }
    }
</script>

<style scoped>
    /* 限时折扣课程 */
    .timeclass{width: 90%;
        margin: 0 auto;
        margin-top: 50px;
    }
    /* 标题 */
    .timeclass_title{position: relative;
        border-bottom: 1px solid #cccccc;
        padding-bottom: 15px;
    }
    .timeclass_title_1{    text-align: center;
        font-size: 26px;
    }
    .timeclass_title_2{position: absolute;
        font-size: 12px;
        top: 10px;
        right: 0px;
        color: #cccccc;
    }
    .timeclass_title_2>img{
        width: 30%;
    }
    /* 内容 */
    .timeclass_content{width: 98%;
        font-size: 12px;
        margin: 0 auto;
        margin-top: 15px;
    }
    /* 内容第一行 */

    .timeclass_content_top>li{float: left;
        width: 18.8%;
        margin-left: 1%;
        cursor: pointer;
    }
    .timeclass_content_top>li:nth-of-type(1){
        margin-left: 0px;

    }
    .timeclass_content_top>li:hover{
        color: #00cf8c;
    }
    .timeclass_content_top>li>img{width: 100%;
        height: 126.92px;
    }
    .timeclass_content_top>li>div{
        margin-top: 10px;
    }
    .timeclass_content_top>li>div:nth-of-type(2){
        color: #888888;
    }
    .timeclass_content_top>li>div:nth-of-type(3){
        color: #00cf8c;
    }

</style>